<template>
  <div class="view-flex view-register">
    <div class="register-box">
      <div class="input-box">
        <span class="input-title">推荐人</span>
        <input class="input-area" readonly v-model="referrerText" />
      </div>
      <div class="input-box">
        <span class="input-title">手机号</span>
        <input
          class="input-area"
          placeholder="请输入您的手机号"
          maxlength="11"
          v-model="mobile"
        />
      </div>
      <div class="input-box">
        <span class="input-title">验证码</span>
        <input
          class="input-area-2"
          placeholder="请输入验证码"
          maxlength="6"
          v-model="code"
        />
        <msg-code-btn :mobile="mobile" />
      </div>
      <div class="btn-box">
        <van-button type="primary" block round class="mt-30" @click="register"
          >立即注册</van-button
        >
        <van-button
          type="primary"
          block
          round
          plain
          class="mt-30"
          @click="download"
          >下载APP</van-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// lib
import { defineComponent } from "vue";
import AsyncValidator from "async-validator";
// components & widgets
import MsgCodeBtn from "./MsgCodeBtn.vue";
import toast from "@/components/toast";
// config
// script & utils & public
import { isMobile } from "vant/lib/utils";
import { verifyMobile } from "@/utils/validator";
// controller & service & logic
// interface
import { ReqLogin } from "@/biz/auth/api";
import { loginService } from "@/biz/auth/service";
// 其它

export default defineComponent({
  name: "Register",
  components: {
    MsgCodeBtn,
  },
  mounted() {
    const query: any = this.$route.query;
    this.referrer = query.referrer || "";
  },
  data() {
    const data: {
      referrer: string;
      mobile: string;
      code: string;
    } = {
      referrer: "",
      mobile: "",
      code: "",
    };
    return data;
  },
  methods: {
    async register() {
      try {
        const params: ReqLogin = {
          mobile: this.mobile.trim(),
          verificationCode: this.code.trim(),
          recommendUserMobile:
            this.referrer !== "" ? this.referrer.trim() : undefined,
        };
        await new AsyncValidator({
          mobile: [
            { type: "string", required: true, message: "请输入手机号" },
            { validator: verifyMobile, message: "手机号格式有误" },
          ],
          verificationCode: [
            {
              type: "string",
              len: 6,
              required: true,
              message: "请输入6位验证码",
            },
          ],
          recommendUserMobile: [
            { validator: verifyMobile, message: "推荐人手机号格式有误" },
          ],
        }).validate(params);
        // 开始前
        toast.loading("注册中");
        // 调用服务
        const r1 = await loginService(params);
        toast.hide();
        if (!r1.payload) return;
        toast.ok("注册成功");
        this.code = "";
      } catch ({ errors }) {
        toast.validFail(errors);
      }
    },
    download() {
      this.$toast.fail("APP尚未上线");
    },
  },
  computed: {
    referrerText() {
      const referrer = this.referrer as string;
      if (isMobile(referrer)) {
        return `${referrer.toString().slice(0, 3)}****${referrer
          .toString()
          .slice(referrer.length - 4, referrer.length)}`;
      }
      return "";
    },
  },
});
</script>

<style scoped lang="less">
.view-register {
  background-image: url("../../assets/register_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  justify-content: flex-end;
}
.register-box {
  width: 690px;
  display: flex;
  flex-direction: column;
  padding: 30px 0;
  align-items: center;
  background-color: #fff;
  border-radius: 30px;
  margin-bottom: 60px;
}
.input-box {
  width: 570px;
  height: 110px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #eeeeee;
}
.input-title {
  width: 130px;
  height: 60px;
  line-height: 60px;
  display: inline-block;
  border-right: 2px solid #eeeeee;
  font-size: 30px;
  color: #333;
}
.input-area {
  width: 380px;
  height: 100px;
  padding: 0 30px;
  color: #333;
}
.input-area-2 {
  width: 200px;
  height: 100px;
  padding: 0 30px;
  color: #333;
}
.btn-box {
  width: 570px;
}
</style>
